<template>
  <div id="basic_data">
    <div style="display:inline-flex;">
      <h3>基本业务数据看板</h3>
      <div v-if="flag1">
        <p 
    style="height:50px;
    line-height:50px;
    font-size:26px;
    color: #0BA2F2;
    margin-left:30px;"
    v-if="homeValue"
    >总会员量：<count-to style="font-size:26px;color: #0BA2F2;"  :start-val="0" :end-val="homeValue[10]?Number(homeValue[10]):0" :duration="1000"></count-to> </p> 
      </div>
    </div>
    
    <!-- <el-row :gutter="10">
      <div v-for="(item,idx) in homeValue" :key="idx">
        <el-col :span="8">
          <div class="item" v-if="idx<2">
            <div class="title">
              <p>{{item.parent.name}}</p>
            </div>
            <div class="money">
              <p>{{item.parent.data}}</p>
            </div>
            <ul>
              <li v-for="(i,idx) in item.children" :key="idx">
                <p>{{i.name}}:</p>
                <p>{{i.data}}</p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item" v-if="idx==2">
            <div class="title">
              <p>{{item.parent.name}}</p>
            </div>
            <div class="money">
              <p>{{item.parent.data| money}}</p>
            </div>
            <ul>
              <li v-for="(i,idx) in item.children" :key="idx">
                <p>{{i.name}}:</p>
                <p>{{i.data | money}}</p>
              </li>
            </ul>
          </div>
        </el-col>
      </div>
    </el-row> -->
    <el-row :gutter="10" style="margin-top:15px;">
      <el-col :span="4-8" v-for="(item,idx) in homeTop" :key="item.id" style="width: 20%;">
        <div :class="flag?'rank-item':'rank1-item'" >
             <div class="logo">
              <img src="../../../assets/img/xiaofeijine.png" v-if="idx==0" alt srcset />
               <img src="../../../assets/img/chongzhidingdanjine 132.png" v-if="idx==1" alt srcset />
               <img src="../../../assets/img/POSshouyinjine.png" v-if="idx==2" alt srcset />
               <img src="../../../assets/img/xiaofeidingdanshul.png" v-if="idx==3" alt srcset />
               <img src="../../../assets/img/chongzhidingdanshuliang.png" v-if="idx==4" alt srcset />
            </div>
          <div class="title">
            <div>
                <p style="color: #0BA2F2;font-size: 17px;font-weight: 400;">{{item.name}}</p>
            </div>
            <div>
              <p v-if="idx!==1&&idx!==3" style="color: #0BA2F2;font-size: 32px;font-weight: bold;">
                {{homeValue[idx] | money}}
                </p>
              <p v-if="idx==1||idx==3" style="color: #0BA2F2;font-size: 32px;font-weight: bold;">{{homeValue[idx]}}</p>
            </div>
            <!-- <div>
                <p style="color: #0BA2F2;font-size: 17px;font-weight: 400;">{{item.totalName}}</p>
            </div> -->
            <!-- <div>
              <p v-if="idx!==1&&idx!==3" style="color: #0BA2F2;font-size: 32px;font-weight: bold;">{{homeValue[idx+5] | money}}</p>
              <p v-if="idx==1||idx==3" style="color: #0BA2F2;font-size: 32px;font-weight: bold;">{{homeValue[idx+5]}}</p>
            </div> -->
              <div  v-if="flag">
                <p style="font-size: 17px;font-weight: 400;color: #555555;">TOP榜</p>
                <div class="more" @click="more(item)" v-if="flag">
                  <p style="font-size: 14px;color:#5C84FD;font-weight: 400; ">查看更多 ></p>
                </div>
            </div>
          </div>
          <ul v-if="flag">
            <li v-for="(i,ix) in item.data" :key="ix">
              <div v-if="idx!==1&&idx!==3">
                <span v-if="i.amount==0">所有门店</span>
                <span v-if="i.amount!==0">{{i.storeName}}</span>
                <span v-if="i.amount/1000000>=1" style="color: #4DA0FF">{{i.amount | top}}万</span>
                <span v-if="i.amount/1000000<1" style="color: #4DA0FF">{{i.amount | money}}</span>
              </div>
              <div v-if="idx==1||idx==3">
                <span v-if="i.amount==0">所有门店</span>
                <span v-if="i.amount!==0">{{i.storeName}}</span>
                <span  style="color: #4DA0FF">{{i.amount}}</span>
              </div>
                <el-progress  :color="i.color" :show-text="false" :percentage="i.proportion*100"></el-progress>

            </li>
          </ul>

        </div>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="10" style="margin-top:15px;">
      <el-col :span="6" v-for="(item,idx) in homeValue" :key="idx">
        <div class="item" v-if="idx>=3">
          <div class="title">
            <p>{{item.parent.name}}</p>
          </div>
          <div class="money">
            <p v-if="idx==4||idx==5">{{item.parent.data | money}}</p>
            <p v-else>{{item.parent.data}}</p>
          </div>
          <ul>
            <li v-for="(i,idxs) in item.children" :key="idxs">
              <p>{{i.name}}:</p>
              <p v-if="idx==4||idx==5">{{i.data | money}}</p>
              <p v-else>{{i.data}}</p>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row> -->
    <!--<el-row :gutter="10" style="margin-top:15px;">-->
      <!--<el-col :span="8" v-for="(item,idx) in homeTop" :key="item.id">-->
        <!--<div :class="flag?'rank-item':'rank1-item'" v-if="idx>=3">-->
         <!--<div class="title">-->
            <!--<div>-->
              <!--<p>{{item.name}}</p>-->
                <!--<p v-if="idx!==3">{{homeValue[idx] | money}}</p>-->
                <!--<p v-if="idx==3">{{homeValue[idx]}}</p>-->
            <!--</div>-->
              <!--<div style="width:70px;" v-if="flag">-->
                <!--<p>TOP榜</p>-->
            <!--</div>-->
          <!--</div>-->
          <!--<ul v-if="flag">-->
            <!--<li v-for="(i,ix) in item.data" :key="ix">-->
              <!--<div v-if="idx!==3">-->
                <!--<span>{{i.storeName}}</span>-->
                <!--<span v-if="i.amount/1000000>=1">{{i.amount | top}}万</span>-->
                <!--<span v-if="i.amount/1000000<1">{{i.amount | money}}</span>-->
              <!--</div>-->
              <!--<div v-if="idx==3">-->
                <!--<span>{{i.storeName}}</span>-->
                <!--<span>{{i.amount}}</span>-->
              <!--</div>-->
              <!--<el-progress :color="i.color" :show-text="false" :percentage="i.proportion*100"></el-progress>-->
            <!--</li>-->
          <!--</ul>-->
          <!--<div class="more" @click="more(item)" v-if="flag">-->
            <!--<p>查看更多 ></p>-->
          <!--</div>-->
        <!--</div>-->
      <!--</el-col>-->
    <!--</el-row>-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="handleClose">
      <div class="dialogBox" v-loading="loading">
         <ul v-if="details">
            <li v-for="(i,ix) in details" :key="ix">
              <!-- <div>
                <span>{{i.storeName}}</span>
                <span>{{i.amount}}</span>
              </div> -->
             <div v-if="i.amount">
                <span>{{i.storeName}}</span>
                <span v-if="i.amount/1000000>=1" style="color: #4DA0FF">{{i.amount | top}}万</span>
                <span v-if="i.amount/1000000<1" style="color: #4DA0FF">{{i.amount | money}}</span>
              </div>
              <div v-if="i.count">
                <span>{{i.storeName}}</span>
                <span style="color: #4DA0FF">{{i.count}}</span>
              </div>
              <el-progress :color="i.color" :show-text="false" :percentage="i.proportion*100"></el-progress>
            </li>
          </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
#basic_data {
  h3 {
    margin: 0;
    color: #555;
    font-size: 26px;
    font-weight: 800;
    line-height: 50px;
    margin-bottom: 30px;
    &:after {
      content: "";
      display: block;
      width: 12px;
      height: 50px;
      background: #5C84FD;
      float: left;
      margin-right: 25px;
      border-radius:10px
    }
  }
  .item {
    background: #fff;
    height: 235px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    padding: 15px;
    .title {
      div {
        color: #555;
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
      }
    }
    .money {
      p {
        color: #555;
        font-size: 30px;
        font-weight: 600;
        margin: 15px 0 30px 0;
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100px;
      li {
        display: flex;
        p:nth-of-type(1) {
          color: #555;
          width: 100px;
        }
        p:nth-of-type(2) {
          font-weight: 600;
          color: #1488e2;
        }
      }
    }
  }
  .rank1-item{
     height: 320px;
    background: #fff;
    border-radius: 4px;
    padding: 0 15px;
    .title {
      & > div {
        color: #555;
        height: 48px;
        font-size: 14px;
        line-height: 48px;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        font-weight: 800;
    font-size: medium;
      }
  }
  }
  .logo {
    width: 30px;
    padding: 30px 0 20px 0;

    img {
      display: block;
      width: 51px;
      border-radius: 50%;
    }
  }
  .rank-item {
    height: 490px;
    background: #fff;
    border-radius: 4px;
    padding: 0 15px;
    .title {
      & > div {
        color: #555;
        height: 48px;
        font-size: 14px;
        line-height: 48px;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        font-weight: 800;
    font-size: medium;
      }
    }
    ul {
      margin-top: 20px;
      li {
        height: 56px;
        div {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          span {
            color: #555;
            font-size: 12px;
          }
        }
      }
    }
    .more {
      // color: #999;
      // font-size: 14px;
      text-align: right;
      cursor: pointer;
    }
  }
}

.dialogBox{
  ul {
      margin-top: 20px;
      li {
        height: 56px;
        div {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          span {
            color: #555;
            font-size: 12px;
          }
        }
      }
    }
}
</style>
<style>
.el-progress-bar__inner{
    background-color: #409EFF;
  }
</style>
<script>
import {getTopDetailData} from '@/config/interface'
import countTo from 'vue-count-to'
export default {
  props: {
    homeTop: {
      type: Array,
      default: Array
    },
    homeValue: {
      type: Array,
      default: Array
    }
  },
  components: {
     countTo
  },
  data() {
    return {
      dialogVisible:false,
      details:[],
      delay: 1000,
      options: {
          useEasing: true,
          useGrouping: true,
          decimalPlaces: 2,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
        },
      title:"",
      flag:true,
      flag1:true,
      loading:false
    };
  },
  methods: {
    //数字跳动
    onReady: function(instance, CountUp) {
        const that = this;
        // instance.update(that.endVal + 100.01);
      },
    more(item) {
      this.loading=true
      this.title = item.name
      getTopDetailData({flag:item.data[0].flag}).then(res=>{
        if(res.data.status==200){
          res.data.result.map((item,idx)=>{
              // item.amount = (item.amount/1000000)
          // console.log(item.amount,"yang")
          switch(idx){
              case 0:
                item.color = "#4DA0FF"
              break;
              case 1:
                item.color = "#FEB800"
              break;
              case 2:
                item.color = "#009588"
              break;
              default:
                item.color = "#009588"
          }
          this.loading=false
        })
        }
        
        this.details = res.data.result
      })
      this.dialogVisible = true
    },

    handleClose(){
      this.dialogVisible = false
    }
  },
  mounted() {
    if(this.$store.state.login.userInfo.storeId){
      this.flag=false
    }else{
      this.flag=true
    }
    if(this.$store.state.login.userInfo.storeId||this.$store.state.login.userInfo.companyId){
      this.flag1=false
    }else{
      this.flag1=true
    }
  },
  
};
</script>

